<template>
  <div class="container">
    <el-button type="primary" @click="downPrint">下载简历</el-button>
    <div class="page-box">
      <div class="basic-box" id="pdfContent" ref="print">
        <div class="sub-box">
          <el-row>
            <el-col :span="18">
              <div class="item">
                <span v-if="detailData.name">{{detailData.name}}
                  <span class="type" v-if="detailData.peopleTypeText">[{{detailData.peopleTypeText}}]</span>
                </span>
                <span v-if="detailData.idCard">{{detailData.idCard}}</span>
              </div>
              <div class="item">
                <span v-if="detailData.sexText">{{detailData.sexText}}</span>
                <span>{{age}}岁（{{$day(detailData.birthday).format('YYYY.MM.DD')}}）</span>
                <span v-if="detailData.educationText">{{detailData.educationText}}</span>
                <span v-if="detailData.maritalStatusText">{{detailData.maritalStatusText}}</span>
                <span v-if="detailData.workExpText||detailData.workTime">|
                  工作{{detailData.workExpText?detailData.workExpText:detailData.workTime}}</span>
                <span v-if="detailData.nationText">{{detailData.nationText}}</span>
              </div>
              <div class="item">
                <span v-if="detailData.currentResidenceText">现居住地：{{detailData.currentResidenceText}}</span>
                <span v-if="detailData.domicilePlaceText">户籍地：{{detailData.domicilePlaceText}}</span>
                <span v-if="detailData.politicalStatusText">{{detailData.politicalStatusText}}</span>
              </div>
              <div class="item">
                <span v-if="detailData.height">身高：{{detailData.height}}</span>
                <span v-if="detailData.weight">体重：{{detailData.weight}}</span>
                <span v-if="detailData.visionText">视力状况：{{detailData.visionText}}</span>
              </div>
              <div class="item">
                <span v-if="detailData.titleLevelText">职称级别：{{detailData.titleLevelText}}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <img
                :src="detailData.photo?detailData.photo:detailData.sex===1?require('../../../assets/img/logo.png'):require('../../../assets/img/logoG.png')"
                alt />
            </el-col>
          </el-row>
        </div>
        <div class="h18 item"></div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="个人信息" name="first">

            <div class="sub-title item">联系信息</div>
            <div class="h18 item"></div>
            <div class="sub-box">
              <div class="item" v-if="detailData.phone">手机号码：{{detailData.phone}}</div>
              <div class="item" v-if="detailData.mail">邮箱：{{detailData.mail}}</div>
              <div class="item" v-if="detailData.qq">QQ号：{{detailData.qq}}</div>
              <div class="item" v-if="detailData.wechat">微信号：{{detailData.wechat}}</div>
              <div class="item" v-if="detailData.mailingAddress">通讯地址：{{detailData.mailingAddress}}</div>
              <div class="item" v-if="detailData.homepage">
                个人主页：
                <a :href="detailData.homepage" target="_blank">{{detailData.homepage}}</a>
              </div>
            </div>

            <div class="h18 item"></div>
            <div class="sub-title item">求职意向</div>
            <div class="h18 item"></div>
            <div class="sub-box">
              <div class="item" v-if="detailData.currentStatusText">目前状态：{{detailData.currentStatusText}}</div>
              <div class="item" v-if="detailData.hopeJobText">期望职位：{{detailData.hopeJobText}}</div>
              <div class="item" v-if="detailData.hopeTradeText">期望行业：{{detailData.hopeTradeText}}</div>
              <div class="item" v-if="detailData.workPlaceText">期望工作地点：{{detailData.workPlaceText}}</div>
              <div class="item" v-if="detailData.workModeText">期望工作方式：{{detailData.workModeText}}</div>
              <div class="item" v-if="detailData.hopeWage">期望薪资：{{detailData.hopeWage}}</div>
              <div class="item">是否需要技能培训：{{detailData.needTrain?'是':'否'}}</div>
            </div>
            <div class="h18 item" v-if=" detailData.eduInfoOutVos &&  detailData.eduInfoOutVos.length"></div>
            <div class="sub-title item" v-if=" detailData.eduInfoOutVos &&  detailData.eduInfoOutVos.length">教育经历</div>
            <div class="h18 item" v-if=" detailData.eduInfoOutVos &&  detailData.eduInfoOutVos.length"></div>
            <div class="sub-box">
              <div class="item" v-if=" detailData.eduInfoOutVos &&  detailData.eduInfoOutVos.length"
                v-for="(item,index) in detailData.eduInfoOutVos" :key="index">
                <span v-if="item.eduTime">{{item.eduTime}} &nbsp;</span>
                <span v-if="item.school">{{item.school}} &nbsp;</span>
                <span v-if="item.major">{{item.major}} &nbsp;</span>
                <span v-if="item.majorCategoryText">（{{item.majorCategoryText}}）&nbsp;</span>
                <span v-if="item.educationText">{{item.educationText}} &nbsp;</span>
              </div>
            </div>
            <div class="h18 item" v-if=" detailData.workInfoOutVos &&  detailData.workInfoOutVos.length"></div>
            <div class="sub-title item" v-if=" detailData.workInfoOutVos &&  detailData.workInfoOutVos.length">工作经历
            </div>
            <div class="h18 item" v-if=" detailData.workInfoOutVos &&  detailData.workInfoOutVos.length"></div>
            <div class="sub-box">
              <div v-if=" detailData.workInfoOutVos &&  detailData.workInfoOutVos.length"
                v-for="(item,index) in detailData.workInfoOutVos" :key="index">
                <div class="item">
                  <span v-if="item.workTime">{{item.workTime}} &nbsp;</span>
                  <span v-if="item.company">{{item.company}} &nbsp;</span>
                </div>
                <div class="item">
                  <span v-if="item.job" style="margin-right: 0;">{{item.job}}</span>
                  <span v-if="item.jobCategoryText">（{{item.jobCategoryText}}）&nbsp;</span>
                  <span v-if="item.preTaxWage">{{item.preTaxWage}}</span>
                </div>
                <div class="item-flex item" v-if="item.remark">
                  <span>工作职责：</span>
                  <pre style="white-space: pre-line;">
                  {{item.remark}}
                 </pre>
                </div>
              </div>

              <div class="h18 item" v-if=" detailData.lagInfoOutVos &&  detailData.lagInfoOutVos.length"></div>
              <div class="sub-title item" v-if=" detailData.lagInfoOutVos &&  detailData.lagInfoOutVos.length">语言能力
              </div>
              <div class="h18 item" v-if=" detailData.lagInfoOutVos &&  detailData.lagInfoOutVos.length"></div>
              <div class="sub-box">
                <el-row v-if=" detailData.lagInfoOutVos &&  detailData.lagInfoOutVos.length"
                  v-for="(item,index) in detailData.lagInfoOutVos" :key="index">
                  <el-col :span="12" v-if="item.languageText">
                    <span class="item">语言：{{item.languageText}}</span>
                  </el-col>
                  <el-col :span="12" v-if="item.proficiencyText">
                    <span class="item">熟练程度：{{item.proficiencyText}}</span>
                  </el-col>
                </el-row>
              </div>
              <div class="h18 item" v-if="detailData.trainInfoOutVos &&  detailData.trainInfoOutVos.length"></div>
              <div class="sub-title item" v-if="detailData.trainInfoOutVos &&  detailData.trainInfoOutVos.length">学习经历
              </div>
              <div class="h18 item" v-if="detailData.trainInfoOutVos &&  detailData.trainInfoOutVos.length"></div>
              <div class="sub-box">
                <div v-if="detailData.trainInfoOutVos &&  detailData.trainInfoOutVos.length"
                  v-for="(item,index) in detailData.trainInfoOutVos" :key="index">
                  <div class="item">
                    <span v-if="item.traTime">{{item.traTime}}</span>
                    <span v-if="item.course">{{item.course}}</span>
                    <span v-if="item.institution">{{item.institution}}</span>
                  </div>
                  <div class="item">
                    <span v-if="item.content">培训内容：{{item.content}}</span>
                  </div>
                </div>
              </div>
              <div class="h18 item"></div>
              <div v-if="(detailData.skillInfoOutVos &&  detailData.skillInfoOutVos.length) 
                || (detailData.awardInfoOutVos &&  detailData.awardInfoOutVos.length)
                || detailData.evaluation" class="sub-title item">自我介绍</div>
              <div class="h18 item"></div>
              <div class="sub-box">
                <div class="item" v-if=" detailData.skillInfoOutVos &&  detailData.skillInfoOutVos.length">技能及特长</div>
                <div v-if=" detailData.skillInfoOutVos &&  detailData.skillInfoOutVos.length"
                  v-for="(item,index) in detailData.skillInfoOutVos" :key="`${index}1`" class="item">
                  <span v-if="item.name" class="mw">技能名称：{{item.name}}</span>
                  <span v-if="item.useDuration">使用时长：{{item.useDuration}}</span>
                </div>
                <div class="h18 item" v-if=" detailData.skillInfoOutVos &&  detailData.skillInfoOutVos.length"></div>

                <div class="item" v-if=" detailData.awardInfoOutVos &&  detailData.awardInfoOutVos.length">成果及获奖情况</div>
                <div v-if=" detailData.awardInfoOutVos &&  detailData.awardInfoOutVos.length"
                  v-for="(item,index) in detailData.awardInfoOutVos" :key="`${index}2`" class="item">
                  <span v-if="item.name" class="mw">奖项名称：{{item.name}}</span>
                  <span v-if="item.gainTime">获得时间：{{item.gainTime}}</span>
                </div>
                <div class="h18 item" v-if=" detailData.awardInfoOutVos &&  detailData.awardInfoOutVos.length"></div>

                <div class="item" v-if="detailData.interest">兴趣爱好</div>
                <div class="item">
                  <span v-if="detailData.interest">{{detailData.interest}}</span>
                </div>
                <div class="h18 item"></div>

                <div class="item" v-if="detailData.evaluation">自我评价</div>
                <pre style="white-space: pre-line;" class="item" v-if="detailData.evaluation">
                   {{detailData.evaluation}}
                  </pre>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="投递记录" name="second">
            <deliverInfo :id='id'></deliverInfo>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import { resumeDetail, downloadCount } from '../../../api/personal';
import deliverInfo from './deliverInfo'
export default {
  data () {
    return {
      activeName: 'first',
      detailData: {},
      id: '',
      url: ''
    };
  },
  components: {
    deliverInfo
  },
  computed: {
    age () {
      if (this.detailData.birthday) {
        let year = this.$day(this.detailData.birthday)
          .format('YYYY.MM.DD')
          .split('.')[0];
        return new Date().getFullYear() - year;
      } else {
        return '';
      }
    }
  },
  created () {
    this.url = process.env.VUE_APP_URL || '';
    this.getDetail();
    this.id = this.$route.query.id;
  },
  beforeRouteUpdate (to, from, next) {
    this.id = to.query.id;
    resumeDetail(to.query.id).then(data => {
      if (data.success) {
        this.detailData = data.data || {};
      } else {
        this.$message.error(`${data.msg}`);
      }
    });
    next();
  },
  methods: {
    getDetail () {
      resumeDetail(this.$route.query.id).then(data => {
        if (data.success) {
          this.detailData = data.data || {};
        } else {
          this.$message.error(`${data.msg}`);
        }
      });
    },

    downPrint () {
      downloadCount({ resumeIds: [this.id] }).then(data => {
        if (data.success) {
          window.open(this.url + '/zsrencai/api/sys/admin/resume-load/resume-info/' + this.id, '_blank')
        } else {
          this.$message.error(`${data.msg}`);
        }
      });
    }
  }
};
</script>
<style scoped>
.container {
    position: relative;
}

.basic-box span,
.sub-box > div {
    margin-right: 20px;
    display: inline-block;
    font-size: 14px;
    line-height: 36px;
    color: #585858;
}

.sub-box div {
    display: block;
}
.page-box {
    border: 1px solid #ebeef5;
    padding: 10px;
    width: 1200px;
    border-radius: 3px;
    box-sizing: border-box;
    min-height: calc(100vh - 180px);
    box-sizing: border-box;
}
img {
    border-radius: 50%;
    width: 130px;
    height: 130px;
    margin-top: 20px;
    /* background: url('../../../assets/img/logo.png') no-repeat;
    background-size: 100% 100%; */
}
/* img.girl {
    border-radius: 50%;
    width: 130px;
    height: 130px;
    margin-top: 20px;
    background: url('../../../assets/img/logoG.png') no-repeat;
    background-size: 100% 100%;
} */
.sub-title {
    height: 36px;
    background: #09f;
    color: #ffffff !important;
    line-height: 36px;
    padding-left: 10px;
    margin-right: 0;
}
.item-flex {
    display: flex !important;
}
.item-flex span {
    width: 168px;
}

.el-button {
    z-index: 1;
    position: absolute;
    top: 40px;
    left: 1110px;
    background: #3549a6;
    border-color: #3549a6;
    padding: 9px 25px;
    font-size: 14px;
}

.el-button:hover {
    opacity: 0.8;
}

.h18 {
    height: 18px;
}

.mw {
    min-width: 50%;
}

a {
    color: #09f;
}

pre {
    width: 668px;
    word-wrap: break-word;
}
.type{
  font-size: 10px!important;
  margin-left: 4px;
  color: rgb(109, 180, 52)!important;
}
</style>